<template>
  <div class="dashboard-content">
    <el-card shadow="none" :body-style="{padding: '0px'}">
      <div class="card-box clearfix">
        <i class="box-title-icon fontColor" :class="businessContent.icon"></i>
        <template>
          <el-tabs v-model="activeNameNews" class="tabs">
            <el-tab-pane :label="businessContent.name" name="first">
              <div class="tabs-content-box">
                <ul class="link-content">
                  <li v-for="link in officeLink" :key="link.id" class="link-list" @click="openMenuFunction(link.url,link.linkName, link.openNewPage)">
                    <a href="javascript:void(0);">
                      <i :class="link.img"></i>

                      <p :title="link.img">{{ link.linkName }}</p>
                    </a>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
        <el-button class="btn-more" type="text">
          <a href="#" @click="handleOfficeMore" class="fontColor">MORE</a>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { businessContent } from '../nbhsj/data/Content.js';
import bus from '../../common/bus';
export default {
    name: 'MenuBusiness',
    data() {
        return {
            activeNameNews: 'first',
            businessContent: businessContent,
            officeLink : []

        };
    },
    created:function (){
        this.getList();
    },
    methods: {
        getList(){
            this.$axios.get(businessContent.officeUrl)
                .then(res => {
                    this.officeLink = res.data;
                });
        },
        openMenuFunction(url,title){
            let menu = {
                url:businessContent.moreUrl,
                name:title,
            };
            bus.$emit('openMenu',menu);
        },
        handleOfficeMore(){
            let menu = {
                url:businessContent.moreUrl,
                name:businessContent.name
            };
            bus.$emit('openMenu',menu);
        }
    },
};
</script>

<style>
  .dashboard-content .el-card{
    border: none;
  }
</style>
<style scoped lang="scss">
.card-box {
  font-size: 18px;
  border: none;

  .link-content{
    padding: 0;

    .link-list {
      list-style: none;
      text-align: center;
      width: 20%;
      cursor: pointer;
      padding: 7px 0;
      float: left;
    }
    .link-img{
      width: 40px;
      height: 40px;
    }
    .link-list:hover {
      background-color: #e6e6e6;
    }
    .link-list > a{
      color:#178CFF;
    }
    .link-list > a > i{
      font-size: 24px;
      margin-bottom: 5px;
      background: rgba($color: #178CFF, $alpha: 0.1);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      line-height: 40px;
    }
    .link-list > a > p {
      text-align: center;
      color: #333;
      font-size: 14px;
    }
    .link-list:nth-child(2n) > a > i{
        color: #fcce04;
        background: rgba(  #fcce04, $alpha: 0.1);
    }
    .link-list:nth-child(3n) > a > i{
        color: #7706e7;
        background: rgba( 119, 6, 231, $alpha: 0.1);
    }
    .link-list:nth-child(4n) > a > i{
        color: #2dbb39;
        background: rgba( #2dbb39, $alpha: 0.1);
    }
    // .link-list:nth-child(5n) > a > i{
    //     color: #b6283f;
    //     background: rgba( #b6283f, $alpha: 0.1);
    // }
  }
}
</style>
